<template>
    <div class="goodsInfo_container">
        <!--小球-->
        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
        <!--商品轮播图区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :bannerList="banner" :bol="false"></swiper>
                </div>
            </div>
        </div>

        <!--商品购买区域-->
        <div class="mui-card">
            <div class="mui-card-header">{{infoArr.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>{{infoArr.market_price}}元</del>
                        销售价：<span>{{infoArr.sell_price}}</span>元
                    </p>
                    <p class="">
                        购买数量：
                        <number @getCount="getNum" :max="infoArr.stock_quantity"></number>
                    </p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button @click="addCart" type="danger" size="small">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>

        <!--商品参数-->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{infoArr.goods_no}}</p>
                    <p>库存情况：{{infoArr.stock_quantity}}</p>
                    <p>上架时间：{{infoArr.add_time | dateFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                 <mt-button @click="goDesc(id)" plain type="primary" size="large">图文介绍</mt-button>
                 <mt-button @click="goComment(id)"  plain type="danger" size="large">商品评论</mt-button>
            </div>
        </div>

    </div>
</template>

<script>
    import swiper from '../subcomponents/swipe.vue'
    import number from '../subcomponents/goodsInfo_number.vue'
    export default {
        name: "goodsInfo",
        data(){
            return {
                id:this.$route.params.id,
                banner:[],
                infoArr:{},
                flag:false,
                isShow:false,
                count:1,//拿到的数量
                num:0
            }
        },
        components:{
            swiper,
            number
        },
        methods:{
            //1.获取轮播图数据
            getBanner(){
                this.$http.get('api/getthumimages/'+this.id).then( result => {
                    if (result.body.status === 0){
                        // console.log(this.banner)
                        //因为封装好了的组件设置的图片路径不一致，所以遍历的追加一个item.img
                        result.body.message.forEach( item => {
                            item.img = item.src;
                        })
                        this.banner = result.body.message;
                    }
                })
            },
            getInfo(){
                this.$http.get('api/goods/getinfo/'+this.id).then(  result => {
                    // console.log(result)
                    if (result.body.status === 0){
                        this.infoArr = result.body.message[0];
                    }
                })
            },
            goDesc(id){
                this.$router.push({name:'goodsDesc',params:{id:id}});
            },
            goComment(id){
                this.$router.push({name:'goodsComment',params:{id:id}});
            },
            addCart(){
                this.num++
                if (this.num < 2){
                    this.flag = !this.flag;
                }

                //点击添加到购物车，把信息保存到store中的数据中
                //每一条数据都是对象：{id:商品的id，count:购买的数量,price:商品的单价,selected:商品的状态}
                let goodsList = {
                    id:this.id,
                    count:this.count,
                    price:this.infoArr.sell_price,
                    selected:true
                }
                this.$store.commit('addToCar',goodsList)

            },
            //设置小球的动画
            beforeEnter(el){
                // if (this.isShow) return false;
                // this.isShow = true;
                if (this.num < 2){
                    el.style.transform = 'translate(0,0)';
                }
            },
            enter(el){
                if (this.num < 2){
                    //强制刷新过度效果
                    el.offsetWidth;
                    //解决分辨率不同，需要计算坐标值
                    let ball = document.querySelector(".ball").getBoundingClientRect();
                    //获取徽标的位置:关于DOM元素和所在的组件没有任何关系
                    let badge = document.querySelector(".mui-badge").getBoundingClientRect();
                    //求差
                    let x = badge.left - ball.left;
                    let y = badge.top - ball.top;

                    // el.style.transform = 'translate(160px,215px)';
                    el.style.transform = `translate(${x}px,${y}px)`;
                    el.style.transition = 'all 1s cubic-bezier(.4,-0.3,.89,.67)';
                    //done();
                }
            },
            afterEnter(el){
                el.style.transition = 'all 0s cubic-bezier(.4,-0.3,.89,.67)';
                this.flag = !this.flag;
                this.num = 0;
            },
            transitionend(){

            },
            getNum(num){
                this.count = num;
                console.log("哈哈哈"+num)
            }
        },
        created(){
            this.getBanner();
            this.getInfo();
        }
    }
</script>

<style scoped lang="scss">
    .goodsInfo_container{
        background-color: #eee;
        /*解决垂直方向外边距塌陷的*/
        overflow: hidden;
        .price{
            span{
                color: red;
                font-weight: bolder;
                font-size: 16px;
            }
        }
        .mui-card-footer{
            display: block;
            button{
                margin: 10px 0;
            }
        }
        .ball{
            width: 15px;
            height: 15px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left: 145px;
            top:445px;
            z-index: 999;
        }
    }
</style>